<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选全不选反选</title>
    <script type="text/javascript">
        window.onload = function () {
            var hobbysObj = document.getElementsByName("hobby");
            var selectAllObj = document.getElementById("selectAll");
            var selectNOObj = document.getElementById("selectNo");
            var selectReverseObj = document.getElementById("selectReverse");

            selectAllObj.onclick = function () {
                for (var i = 0; i < hobbysObj.length; i++) {
                    hobbysObj[i].checked = true;
                }
            };
            selectNOObj.onclick = function () {
                for (var i = 0; i < hobbysObj.length; i++) {
                    hobbysObj[i].checked = false;
                }
            };
            selectReverseObj.onclick = function () {
                for (var i = 0; i < hobbysObj.length; i++) {
                    hobbysObj[i].checked = !hobbysObj[i].checked;
                }
            };
        }
    </script>
</head>
<body>
<table>
    <tr>
        <!--        多选框-->
        <td><input type="checkbox" name="hobby" value="cpp">C++</td>
        <td><input type="checkbox" name="hobby" value="java">Java</td>
        <td><input type="checkbox" name="hobby" value="js">Java Script</td>
    </tr>
    <tr>
        <!--        选择按钮-->
        <td>
            <button id="selectAll">全选</button>
        </td>
        <td>
            <button id="selectNo">全不选</button>
        </td>
        <td>
            <button id="selectReverse">反选</button>
        </td>
    </tr>
</table>
<br/>

</body>
</html>